<template>
  <div class="login">
    <div class="header">
      <img class="logo-img" src="@/assets/image/logo.jpg" alt="" />
    </div>
    <view class="content">
      <van-button type="primary" round block @click="checkIsBindPhone">登录</van-button>
    </view>
  </div>
</template>

<script>
import {} from '@/api/login'
import { reactive, toRefs, ref, onBeforeMount, computed } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { Toast, Dialog } from 'vant'
import { getToken } from '@/utils/auth'
export default {
  name: 'Login',
  setup() {
    const store = useStore()
    const router = useRouter()
    const pattern = /^(?:(?:\+|00)86)?1\d{10}$/
    const isLogin = computed(() => {
      return getToken()
    })
    const state = reactive({
      loading: false,
      isShowFirstGetPhoneBtn: false
    })
    onBeforeMount(async () => {
      // alert(JSON.stringify(router))
      // alert(JSON.stringify(router.currentRoute.value.query))
      // if (!this.isLogin) {
      //   this.checkIsBindPhone()
      // }
    })
    const onSubmit = () => {
      const REDIRECT_URI=UrlEncode('https://lx-mis.shanzuwang.com/login')
      const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${store.getters['corpId']}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=snsapi_base&state=STATE&agentid=#wechat_redirect`
      const a = document.createElement('a')
      a.href = url
      a.click()
    }
    const checkIsBindPhone = () => {
      const code = 'U2ujJGa1TFQBZb8wA7oA9te006O4RlsRqYSL0RY9LU0'
      state.loading = true
      store
        .dispatch('user/login', { code })
        .then(() => {
          state.loading = false
          // console.log(router.currentRoute.value.query)
          // const { redirect } = router.currentRoute.value.query
          // router.push({ path: redirect })
        })
        .catch((err) => {
          state.loading = false
          Toast(err.message)
        })
    }

    return {
      ...toRefs(state),
      isLogin,
      checkIsBindPhone,
      onSubmit
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  transition: transform 1s;
  transform: scale(1);
  height: 100%;
  padding: 100px 50px 0;
  overflow: hidden;
  .header {
    border-bottom: 1px solid #ccc;
    text-align: center;
    height: 159px;
    line-height: 225px;
    .logo-img {
      width: 100px;
      height: 100px;
    }
  }
  .content {
    margin: 100px 25px;
  }
}
</style>
